<div class="imagesrotator" style="text-align:left;margin:0;padding:0;width:{{width}}px;height:{{height}}px;" id="{{imagerotatorid}}">
<div class="imgs" style="z-index:1;position:absolute;">{% for img in imgs %}
    {% if img.dst %}<a href="{{img.dst}}" title="{{img.title}}" {%if img.target%}target="{{img.target}}"{%endif%} style="display: none;" id="{{img.id}}"><img src="{{img.src}}" alt="{{img.alt}}" width="{{width}}" height="{{height}}" style="border: 0;" /></a>{% else %}<div id="{{img.id}}" style="display: none;"><img src="{{img.src}}" alt="{{img.alt}}" width="{{width}}" height="{{height}}" style="border: 0;"/></div>{% endif %}{% endfor %}
</div>
<div class="box" style="z-index:2; position:relative;">
    <div class="pad" style="cursor:pointer;width:{{width}}px; height:{{height|add:"-22"}}px;" onclick="{{imagerotatorid}}.clickLink();"></div>
    <div class="nums" style="height:22px;width:{{width}}px;">
    <table border="0" cellspacing="0" cellpadding="0" align="right">
    <tr valign="top">{% for img in imgs %}
    <td width="24" height="20" align="center"><div style="-moz-opacity:0.50;opacity:0.50;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50,finishOpacity=100);font-weight:bold;width:20px;height:20px;background-color:#000;color:#fff;padding:0;margin:0;cursor:pointer;" onmouseover="{{imagerotatorid}}.setColor({{forloop.counter0}});" onmouseout="{{imagerotatorid}}.resetColor(this,{{forloop.counter0}});" onclick="{{imagerotatorid}}.changeImage({{forloop.counter0}});" id="{{img.btnid}}">{{forloop.counter}}</div></td>{% endfor %}
    </tr>
    </table>
    </div>
</div>
</div>
<script language="javascript" type="text/javascript">
function ImageRotator( id, imgs, ids, btns, delay ){
	this.id = id;
        this.imgs = imgs;
	this.ip = 0;
	this.ids = ids;
	this.btns = btns;
	this.delay = delay;
	this.interval = 0;
}
ImageRotator.prototype.changeImage = function( ip ){
        if( this.interval != 0 ){
            window.clearInterval( this.interval );
        }
	this.hideObj( this.ip );
	this.showObj( ip );
	this.ip = ip;
	var someobj92384123471 = this;
	this.interval = window.setInterval( function(){ someobj92384123471.nextImage(); }, this.delay );
};
ImageRotator.prototype.showObj = function( ip ){
	var obj1 = window.document.getElementById( this.ids[ip] );
	if( typeof(obj1) != 'undefined' ){
		obj1.style.display = "block";
	}
	
	var obj2 = window.document.getElementById( this.btns[ip] );
	if( typeof(obj2) != 'undefined' ){
		obj2.style.backgroundColor = "red";
	}
};
ImageRotator.prototype.hideObj = function( ip ){
	var obj1 = window.document.getElementById( this.ids[ip] );
	if( typeof(obj1) != 'undefined' ){
		obj1.style.display = "none";
	}
	var obj2 = window.document.getElementById( this.btns[ip] );
	if( typeof(obj2) != 'undefined' ){
		obj2.style.backgroundColor = "#000";
	}
};
ImageRotator.prototype.nextImage = function(){
	this.hideObj( this.ip );
	this.ip = (this.ip+1)%this.ids.length;
	this.showObj( this.ip );
};
ImageRotator.prototype.setColor = function(ip){
	var obj = window.document.getElementById( this.btns[ip] );
	if( typeof(obj) != 'undefined' ){
		obj.style.backgroundColor = "red";
	}
};
ImageRotator.prototype.resetColor = function(obj,ip){
	if( this.ip != ip ){
		obj.style.backgroundColor = "#000";
	}
};
ImageRotator.prototype.clickLink = function(){
    var dst = this.imgs[this.ip].dst;
    var target = this.imgs[this.ip].target;
    
    if( dst != "" && target == ""){
        window.location.href = dst;
    } else if( dst != "" && target != "" ){
	window.open( dst, target );
    }
};
{% autoescape off %}
var {{imagerotatorid}} = new ImageRotator(
        "{{imagerotatorid}}",
        {{imgsdatastring}},
	{{imgIds}},
	{{imgBtnIds}},
	{{delay}} );
{{imagerotatorid}}.changeImage(0);
{% endautoescape %}</script>

